<template>
<div class="fromPlatform">
    <div slot="footer" class="dialog-footer clearfix">
      <div style="float: left; line-height: 32px;padding-left: 12px;">
        预约处理
        <span style='color: #999;font-size:12px;'>
          处理平台患者预约的订单
        </span>
      </div>
      <div style="float: right;">
          <el-button type="primary" @click="submitForm('dialogLeftTop1_3_data')">下一步</el-button>
          <el-button type="success" @click="getCase">调阅病历</el-button>
          <el-button type="info" @click="cancel">取 消</el-button>
      </div>
    </div>
    <div class="scrollWrap" ref= 'scrollWrap'>
      <appointment-info :appointment='appointmentInfo'></appointment-info>
      <el-row :gutter="20">
          <el-col :span="6"><div class='item'><span >性别：</span> {{appointment.sex}}</div></el-col>
          <el-col :span="6"><div  class='item'><span >出生日期：</span>{{appointment.birthday}}</div></el-col>
          <el-col :span="6"><div  class='item'><span >申请时间：</span>{{appointment.expectTime}}</div></el-col>
      </el-row>
      <el-row>
          <el-col><div  class='item'><span >家庭地址：</span>{{appointment.address}}</div></el-col>
      </el-row>

      <el-row :gutter="20">
          <el-col :span="8"><div  class='item'><span >预约手术时间：</span>{{appointment.isAppointed}}</div></el-col>
          <el-col :span="8"><div  class='item'><span >是否已就诊：</span>{{appointment.jzbz}}</div></el-col>
          <el-col :span="8"><div  class='item'><span >就诊卡号：</span>{{appointment.idCard}}</div></el-col>
      </el-row>
      <el-row>
          <el-col :span="12"><div  class='item'><span >该疾病是否是第一次手术：</span>{{appointment.firstOpt}}</div></el-col>
      </el-row>
      <el-row>
          <el-col :span="6"><div  class='item'><span >患者留言：</span>{{appointment.ly}}</div></el-col>
      </el-row>
      <div class='attachment'>
          <h3> 附件：</h3>
        <div class="box">
            <el-upload
                :action="upLoadImage"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list="fileList2">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
      </div>
      <div class="change">
        <el-form :inline="true">
          <el-form-item label="下一项">
            <el-radio-group v-model="resource">
              <el-radio label="0">转挂号</el-radio>
              <el-radio label="1">转院内预约</el-radio>
              <el-radio label="2">取消预约</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="">
            <el-input v-if='resource === "2"' type='text'  placeholder="取消原因" v-model="dialogLeftTop1_3_data.cancelNote"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
</div>
</template>
<script>
import appointmentInfo from '@/yimiviews/components/appointmentInfo'
import { appointmentConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
import { read, deal } from '@/api/appointmentManage/appointmentConfirm'
export default {
  components: { appointmentInfo },
  created() {
    this.getPatientInfo()
  },
  mounted() {
    this.setAppMainHeight()
  },
  data() {
    return {
      resource: '0',
      dialogImageUrl: '',
      upLoadImage: this.$store.state.app.BASE_API + '/attachment/upLoadImage',
      dialogVisible: false,
      appointmentInfo: {},
      fileList2: [
      ],
      radio2: '', // 要删掉的
      checkbox: [], // 要删掉的
      textarea: '', // 要删掉的
      appointmentConfirmConst,
      activeName: 'first',
      dialogLeftTop1_3_data: {
        cancelNote: ''
      },
      dialogLeftTop1_1_data_anesthesiaDoctorList: [],
      anticoagulantTypeOther: '',
      options: [{
        value: 'zhinan',
        label: '上海省',
        children: [{
          value: 'shejiyuanze',
          label: '上海市1',
          children: [{
            value: 'yizhi',
            label: '浦东'
          }, {
            value: 'fankui',
            label: '虹桥发放萨法'
          }, {
            value: 'xiaolv',
            label: '杨浦'
          }]
        }, {
          value: 'daohang',
          label: '上海市2',
          children: [{
            value: 'cexiangdaohang',
            label: '宝山'
          }, {
            value: 'dingbudaohang',
            label: '嘉定'
          }]
        }]
      }],
      formLabelWidth: '120px',
      appointment: {}
    }
  },
  methods: {
    getPatientInfo() {
      read(this.$route.params.id).then(res => {
        this.appointmentInfo = res.data.data
      })
    },
    handleClick() {},
    handleRemove(file, fileList) {
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitForm(formName) {
      const id = this.$route.params.id
      console.log(this.$route.params.id)
      deal(this.dialogLeftTop1_3_data, this.resource, id).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: '预约处理成功！',
            type: 'success',
            duration: 2000
          })
          this.$router.push({ path: '/appointmentConfirm/appointmentDeal/' + id })
          this.$root.closeTag()
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    getCase() {
      const id = this.$route.params.id
      this.$router.push(`/case/${id}`)
    },
    cancel() {
      this.$root.closeTag()
    },
    setAppMainHeight() {
      const bodyHeight = document.body.offsetHeight
      const appMainHeight = bodyHeight - 180
      this.$refs.scrollWrap.style.height = appMainHeight + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>
.fromPlatform{
    padding-bottom: 20px;
    background-color: #f0f2f5;
    .dialog-footer {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 20px;
    }
    .scrollWrap{
      min-height: 100%;
      overflow: auto;
      padding: 20px;
      background-color: #fff;
      margin: 0 20px;
    }
    .el-input-group__append{
        width: 80px;
        border: 0 !important;
        background-color: transparent !important;
    }
    .item{
        padding: 10px 0;
        margin-left: 40px;
    }
    .attachment{
      padding-left: 40px;
      .box{
        border: 1px solid #ddd;
        padding: 20px 20px 15px;
      }
    }
    .change{
      margin: 20px 0;
      padding-left: 40px;
    }
}
</style>

